<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>作业范围分配</span>
        <el-button size="medium" type="danger" style="float: right; ">编辑</el-button>
      </div>
      <div>
        <el-form label-width="90px" size="medium">
          <el-form-item label="地区关键字">
            <el-input v-model="center.address" style="width:200px " placeholder="请输入地区关键字" />
          </el-form-item>
        </el-form>
      </div>
      <baidu-map
        class="bm-view"
        :center="center.address"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        <!-- bm-marker 百度地图标记点，position是标记点经纬度 -->
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" @click="infoWindowOpen">
          <!-- 标记点弹框 -->
          <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{ center.address }}</bm-info-window>
        </bm-marker>
      </baidu-map>
    </el-card>
  </div>
</template>

<script src="https://unpkg.com/vue-baidu-map"></script>
<script>
export default {
  data() {
    return {
      center: {
        address: '广州',
        lng: 113.322,
        lat: 23.109
      },
      show: false,
      zoom: 11
    }
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    syncCenterAndZoom (e) {
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    }
  }
}

</script>

<style>
.box-card{
  margin:20px
}
.bm-view {
  width: 100%;
  height: 500px;
}

</style>
